<template>
    <a-layout class="console-layout">
        <a-layout-sider class="console-sider" breakpoint="lg" collapsible :collapsed="collapsed" @collapse="onCollapse">
            <div class="logo"></div>
            <SiderNav :menus="menus" />
        </a-layout-sider>
        <a-layout>
            <a-affix :offsetTop="0">
                <a-layout-header class="console-header">
                    <div class="toolbar toolbar-menu">
                        <a-button shape="circle" @click="onCollapse(!collapsed)">
                            <icon-menu-fold v-if="collapsed" />
                            <icon-menu-unfold v-else />
                        </a-button>
                        <RouteBreadcrumb />
                    </div>
                    <div class="toolbar toolbar-nav"></div>
                    <div class="toolbar toolbar-user">
                        <UserNav nowModule="console" position="bl" />
                    </div>
                </a-layout-header>
            </a-affix>
            <a-layout class="console-view">
                <a-layout-content>
                    <RoutePage />
                </a-layout-content>
                <a-layout-footer>Footer</a-layout-footer>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import RouteBreadcrumb from './RouteBreadcrumb.vue';
import RoutePage from './RoutePage.vue';

import { consoleMenus as menus } from '@/router/menus';
import SiderNav from './SiderNav.vue';
import UserNav from './UserNav.vue';

const collapsed = ref(false);
const onCollapse = (val: boolean, _type: string = '') => {
    // const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';
    // Message.info({
    //     content,
    //     duration: 2000,
    // });
    collapsed.value = val;
};


</script>

<style lang="css" scoped>
.console-layout {
    height: 100vh;
}

.console-sider {
    .logo {
        height: 49px;
        background: rgba(255, 255, 255, 0.2);
    }
}

.console-header {
    background-color: #fff;
    padding: 0 20px 0 20px;
    height: 49px;
    line-height: 49px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid #e8e8e8;

    .toolbar {
        display: flex;
        align-items: center;
    }

    .toolbar-user {
        margin-right: 35px;
    }

}

.console-view {
    padding: 24px;
}
</style>